<!DOCTYPE html>
<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{adminUserSettings.title}, header=#{adminUserSettings.header})}"></th:block>
  </head>

  <body>
    <th:block th:insert="~{fragments/common :: game}"></th:block>
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
        <br><br>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-8 bg-card">

              <!-- User Settings Title -->
              <h2 class="text-center" th:text="#{adminUserSettings.header}">Admin User Control Settings</h2>
              <div th:if="${deleteMessage}" class="alert alert-danger">
                <span th:text="#{${deleteMessage}}">Message</span>
              </div>
              <table class="table">
                <thead>
                  <tr>
                    <th th:text="#{username}">Username</th>
                    <th th:text="#{adminUserSettings.roles}">Roles</th>
                    <th th:text="#{adminUserSettings.actions}">Actions</th>
                    <th th:text="#{adminUserSettings.authenticated}">Authenticated</th>
                  </tr>
                </thead>
                <tbody>
                  <tr th:each="user : ${users}">
                    <td th:text="${user.username}"></td>
                    <td th:text="#{${user.roleName}}"></td>
                    <td>
                      <form th:if="${user.username != currentUsername}" th:action="@{'/api/v1/user/admin/deleteUser/' + ${user.username}}" method="post">
                        <button type="submit" th:text="#{delete}">Delete</button>
                      </form>
                    </td>
                    <td th:text="${user.authenticationType}"></td>
                  </tr>
                </tbody>
              </table>

              <h2 th:text="#{adminUserSettings.addUser}">Add New User</h2>
              <div th:if="${addMessage}" class="alert alert-danger">
                <span th:text="#{${addMessage}}">Default message if not found</span>
              </div>
              <button class="btn btn-outline-info" data-toggle="tooltip" data-placement="auto" th:title="#{adminUserSettings.usernameInfo}" th:text="#{help}">Help</button>
              <form id="formsaveuser" action="/api/v1/user/admin/saveUser" method="post">
                <div class="mb-3">
                  <label for="username" th:text="#{username}">Username</label>
                  <input type="text" class="form-control" name="username" id="username" th:title="#{adminUserSettings.usernameInfo}" required>
                  <span id="usernameError" style="display: none;" th:text="#{invalidUsernameMessage}">Invalid username!</span>
                </div>
                <div class="mb-3">
                  <label for="password" th:text="#{password}">Password</label>
                  <input type="password" class="form-control" name="password" required>
                </div>
                <div class="mb-3">
                  <label for="role" th:text="#{adminUserSettings.role}">Role</label>
                  <select name="role" class="form-control" required>
                    <option value="" disabled selected th:text="#{selectFillter}">-- Select --</option>
                    <option th:each="roleDetail : ${roleDetails}" th:value="${roleDetail.key}" th:text="#{${roleDetail.value}}">Role</option>
                  </select>
                </div>
                <div class="mb-3">
                  <input type="checkbox" class="form-check-input" id="forceChange" name="forceChange">
                  <label class="form-check-label" for="forceChange" th:text="#{adminUserSettings.forceChange}">Force user to change username/password on login</label>
                </div>

                <!-- Add other fields as required -->
                <button type="submit" class="btn btn-primary" th:text="#{adminUserSettings.submit}">Save User</button>
              </form>
              <hr />
              <h2 th:text="#{adminUserSettings.changeUserRole}">Change User's Role</h2>
              <button class="btn btn-outline-info" data-toggle="tooltip" data-placement="auto" th:title="#{downgradeCurrentUserLongMessage}" th:text="#{help}">Help</button>
              <div th:if="${changeMessage}" class="alert alert-danger">
                <span th:text="#{${changeMessage}}">Default message if not found</span>
              </div>
              <form action="/api/v1/user/admin/changeRole" method="post">
                <div class="mb-3">
                  <label for="username" th:text="#{username}">Username</label>
                  <select name="username" class="form-control" required>
                    <option value="" disabled selected th:text="#{selectFillter}">-- Select --</option>
                    <option th:each="user : ${users}" th:if="${user.username != currentUsername}" th:value="${user.username}" th:text="${user.username}">Username</option>
                  </select>
                </div>
                <div class="mb-3">
                  <label for="role" th:text="#{adminUserSettings.role}">Role</label>
                  <select name="role" class="form-control" required>
                    <option value="" disabled selected th:text="#{selectFillter}">-- Select --</option>
                    <option th:each="roleDetail : ${roleDetails}" th:value="${roleDetail.key}" th:text="#{${roleDetail.value}}">Role</option>
                  </select>
                </div>

                <!-- Add other fields as required -->
                <button type="submit" class="btn btn-primary" th:text="#{adminUserSettings.submit}">Save User</button>
              </form>
            </div>
          </div>
        </div>
      </div>
      <script th:inline="javascript">
        jQuery.validator.addMethod("usernamePattern", function(value, element) {
            return this.optional(element) || /^[a-zA-Z0-9][a-zA-Z0-9@._+-]*[a-zA-Z0-9]$|^(?=.{1,64}@)[A-Za-z0-9]+(\.[A-Za-z0-9_+.-]+)*@[^-][A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*(\.[A-Za-z]{2,})$/.test(value);
        }, /*[[#{invalidUsernameMessage}]]*/ "Invalid username format");
        $(document).ready(function() {
          $('[data-toggle="tooltip"]').tooltip();

          $('#formsaveuser').validate({
            rules: {
              username: {
                required: true,
                usernamePattern: true
              },
              password: {
                required: true
              }
              },
              messages: {
                  username: {
                      usernamePattern: /*[[#{invalidUsernameMessage}]]*/ "Invalid username format"
                  },
              },
              errorPlacement: function(error, element) {
                  if (element.attr("name") === "username") {
                      $("#usernameError").text(error.text()).show();
                  } else {
                      error.insertAfter(element);
                  }
              },
              success: function(label, element) {
                  if ($(element).attr("name") === "username") {
                      $("#usernameError").hide();
                  }
              }
          });

          $('#username').on('input', function() {
              var usernameInput = $(this);
              var isValid = usernameInput[0].checkValidity();
              var errorSpan = $('#usernameError');

              if (isValid) {
                  usernameInput.removeClass('invalid').addClass('valid');
                  errorSpan.hide();
              } else {
                  usernameInput.removeClass('valid').addClass('invalid');
                  errorSpan.show();
              }
          });
        });
      </script>
      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
    </div>
  </body>
</html>